<script setup lang="ts">
import { nextTick, ref, unref, watch } from 'vue'

const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})
const elRef = ref<HTMLSpanElement | null>(null)

watch(
  () => props.icon,
  async () => {
    const span = document.createElement('span')
    span.className = 'iconify'
    span.dataset.icon = props.icon
    await nextTick()
    const el = unref(elRef)
    if (el) {
      el.textContent = ''
      el.appendChild(span)
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div ref="elRef" class="inline-block"></div>
</template>
